<template>
  <div class="container">
    <van-sticky>
      <THeader title="传统点名">
        <template v-slot:icon id="studentList">
          <span style="font-size: 4.5vw" @click="handleSubButtonClick()">提交</span>
        </template>
      </THeader>
    </van-sticky>
    <div class="content">
      <div id="studentList">
        <van-tabs v-model="active" swipeable>
          <van-tab v-for="(item,inde) in studentList"  :title=item.name :key="inde">
            <transition-group name="list" tag="div">
              <van-cell-group  inset v-for="(value, index) in item.stuList" :key="index" style="margin: 3%; border-radius: 15px;"   :class="{'slideOut': item.slideOut[index]}" >
                <van-cell id="student" >
                  <div class="text">
                    <span v-if="item.sgin[index] === false" style="background-color: #2b93ed;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                    <span v-else-if="item.leaved[index] === false" style="background-color: #fac121;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                    <span v-else-if="item.absent[index] === false" style="background-color: #c55350;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                    <span v-else style="background-color: #fdfdfe;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                    <div class="img" @click="handClick('签到',index,inde)">
                      <van-image v-if="value.photo === 1"
                                 :src="eduUrl+'/jwfilepath/StudentPhotos/' + value.stuID % 100 + '/' + value.stuID + '.jpg'"
                      />
                      <van-image v-else
                                 :src="eduUrl+'/jwfilepath/StudentPhotos/no.jpg'"
                      />
                    </div>
                    <div class="content" @click="handClick('签到',index,inde)">
                      <div class="info">
                        <p>{{value.name}}</p>
                        <p style="font-size: 3.3vw; color: #9a9b9d">{{value.number}}</p>
                      </div>
                      <span class="middle" v-for="id in generateNumberArray(time)"  style="color: #9a9b9d">
                      <var-icon v-if="value.rec[id] === 100"  name="check" class="my-icon"/>
                      <var-icon v-else-if="value.rec[id] === 2" name="window-close" class="my-icon"/>
                      <var-icon v-else-if="value.rec[id] === 1" name="radio-blank" size="20px"/>
                      <var-icon style="color: #fdfdfe" v-else class="my-icon" name="plus"/>
                  </span>
                    </div>
                    <div class="option">
                      <van-row>
                        <van-col span="24"><van-button :plain="item.sgin[index]"  color="#2B94EEFF"  @click="handClick('签到',index,inde)"><van-icon name="success" /></van-button></van-col>
                        <van-col span="24"> <van-button :plain="item.leaved[index]"  :color="item.leaved[index] ? '#2B94EEFF' : '#f1c75e'"  @click="handClick('事假', index,inde)">假</van-button></van-col>
                        <van-col span="24"><van-button :plain="item.absent[index]"  :color="item.absent[index] ? '#2B94EEFF' : '#c55350'"  @click="handClick('旷课', index,inde)"><van-icon name="cross" /></van-button></van-col>
                      </van-row>
                    </div>
                  </div>
                </van-cell>
              </van-cell-group>

            </transition-group>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {onBeforeRouteLeave} from "vue-router";
import {ref} from "vue";
import { Dialog } from 'vant';
import {Toast} from "vant";
import 'vant/lib/index.css'
import {UseGetAttendanceTimesStore} from "../../../../../store/modules/jsdm";
import {startKldm} from '/@/api/jsdm';
import {editAttendanceTime} from '/@/api/jsdm';
import {getAttendanceTimes} from '/@/api/jsdm';
import { useRoute, useRouter} from "vue-router/dist/vue-router";
import {toReactive} from "@vueuse/core/index";
import {getEduUrl} from "/@/api";
export default {
  setup() {
    const getAttendance = UseGetAttendanceTimesStore();
    const studentAttendance =  reactive([]);
    const time = ref(0);
    const dmjl = reactive([]);
    const fid = ref(null);
    const allStudent = ref(null);
    const stuIds = reactive([]);
    const router = useRouter();
    const route = useRoute();
    const tcID = route.query.tcID;
    const index = route.query.index;
    const stuIndex = ref(0);
    const clic = ref(true);
    const sub = ref(false);
    const eduUrl=getEduUrl();
    let dmjlList = reactive([]);
    let stuid = reactive([]);
    const tab = reactive({
      studentList: [
        {name: "所有", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "已签", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "请假", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "旷课", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "未处理", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
      ],
    });

    //初始化点名信息
    const getAttendanceTime = async (tab) => {
      console.log(index)
      console.log("get",getAttendance.data[3])
      console.log("get",getAttendance.data[index].studentAttendance)
      time.value = getAttendance.data[index].times.length;
      studentAttendance.value = getAttendance.data[index].studentAttendance;
      for(let i = 0; i < studentAttendance.value.length; i++)
      {
        dmjl[i] = 0;
        stuIds[i] = studentAttendance.value[i].stuID;
        tab.studentList[0].stuList.push(studentAttendance.value[i]);
        tab.studentList[0].sgin.push(true);
        tab.studentList[0].leaved.push(true);
        tab.studentList[0].absent.push(true);
        tab.studentList[4].stuList.push(studentAttendance.value[i]);
        tab.studentList[4].sgin.push(true);
        tab.studentList[4].leaved.push(true);
        tab.studentList[4].absent.push(true);
        tab.studentList[0].slideOut.push(false);
        tab.studentList[1].slideOut.push(false);
        tab.studentList[2].slideOut.push(false);
        tab.studentList[3].slideOut.push(false);
        tab.studentList[4].slideOut.push(false);
      }
    }

    //按钮状态信息
    const handelSgin =(item,index)=>{
      tab.studentList[item].sgin[index] = false;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = true;
    }
    const handelLeave =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = false;
      tab.studentList[item].absent[index] = true;
    }
    const handelAbsent =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = false;
    }
    const handelInit =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = true;
    }

    // const setRef = (index) => (el) => {
    //   cellRefs.value[index] = el;
    //
    // };

    //
    watch(tab.studentList, (newValue, oldValue) => {
    }, {
      deep: true
    });

    //点名交互逻辑
    const handClick = (action, index, item) => {
      clic.value = false;
      for(let i = 0; i < stuIds.length; i++)
      {
        if(tab.studentList[item].stuList[index].stuID === stuIds[i])
        {
          stuIndex.value = i;
        }
      }
      const student = studentAttendance.value[stuIndex.value]
      if (action === "签到") {
        dmjl[stuIndex.value] = 100;
        handelSgin(0,stuIndex.value);
        if(item == 0 ||item == 2||item == 3||item == 4)
        {
          if (!tab.studentList[1].stuList.includes(student)) {
            if(tab.studentList[2].stuList.includes(student) && item !== 0) {
              handelSgin(2,index)
              // clickedCell.$el.classList.add('slideOut');
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[item].slideOut[index] = false;
                tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
                handelLeave(2,index)
              },1000)

            }
            else if(tab.studentList[3].stuList.includes(student) && item !== 0)
            {
              handelSgin(3,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[item].slideOut[index] = false;
                tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
                handelAbsent(3,index)
                // clickedCell.$el.classList.remove('slideOut')
              },1000)

            }
            else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelSgin(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }

            tab.studentList[1].stuList.push(student);
            tab.studentList[1].sgin.push(false);
            tab.studentList[1].leaved.push(true);
            tab.studentList[1].absent.push(true);
          }
        }
      }
      else if (action === "事假") {
        dmjl[stuIndex.value] = 1;
        handelLeave(0,stuIndex.value);

        if(item === 0 ||item === 1||item === 3||item === 4)
        {
          if (!tab.studentList[2].stuList.includes(student))
          {
            if(tab.studentList[1].stuList.includes(student) && item !== 0) {
              handelLeave(1,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
                handelSgin(1,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }
            if(tab.studentList[3].stuList.includes(student) && item !== 0)
            {
              handelLeave(3,index)
              tab.studentList[item].slideOut[index] = true;

              setTimeout(()=>{
                tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
                handelAbsent(3,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelLeave(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }
            tab.studentList[2].stuList.push(student)
            tab.studentList[2].sgin.push(true)
            tab.studentList[2].leaved.push(false)
            tab.studentList[2].absent.push(true)
          }
        }
      }
      else if (action === "旷课")
      {
        dmjl[stuIndex.value] = 2;
        handelAbsent(0,stuIndex.value);

        if(item === 0 ||item === 1||item === 2||item === 4)
        {
          if (!tab.studentList[3].stuList.includes(student)) {
            if(tab.studentList[1].stuList.includes(student) && item !== 0) {
              handelAbsent(1,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
                handelSgin(1,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }
            if(tab.studentList[2].stuList.includes(student) && item !== 0)
            {
              handelAbsent(2,index)
              tab.studentList[item].slideOut[index] = true;

              setTimeout(()=>{
                tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
                handelLeave(2,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelAbsent(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }
            tab.studentList[3].stuList.push(student)
            tab.studentList[3].sgin.push(true)
            tab.studentList[3].leaved.push(true)
            tab.studentList[3].absent.push(false)
          }
        }
      }
    };

    //提交点名信息
    const handleSubButtonClick = async () =>{

      sub.value = true;
      Dialog.confirm({
        title: '提示',
        message: '是否提交点名信息',
        confirmButtonColor : '#007aff',
        cancelButtonColor: '#007aff',
      }).then( async () => {
        for(let i = 0; i < studentAttendance.value.length; i++)
        {
          if(dmjl[i] == 0)
          {
            stuIds[i] = 0;
          }
        }
        const timestamp = Date.now();
        dmjlList = dmjl.filter(item => item !== 0)
        stuid = stuIds.filter(item => item !== 0)
        console.log("werfgt",dmjl.value)
        console.log("werfgt",stuIds.value)
        await editAttendanceTime(tcID, JSON.stringify(dmjlList), 0,JSON.stringify(stuid),'new',timestamp)
            .then( async (res) => {
              if (res.response.value.state) {
                const resData = await getAttendanceTimes(tcID)
                console.log(resData.response.value.times)
                getAttendance.data[index].studentAttendance = resData.response.value.studentAttendance;
                getAttendance.data[index].times = resData.response.value.times;
                router.back();
                Toast(res.response.value.msg)
              }
            });
      }).catch( error => {
        console.error(error);
      });
    }

    onBeforeRouteLeave((to, from, next)=>{
      if(clic.value === false && sub.value === false)
      {
        Dialog.confirm({
          closeOnPopstate: false,
          title: '提示',
          message: '点名信息还未提交，是否退出',
          confirmButtonColor : '#007aff',
          cancelButtonColor: '#007aff',
        }).then( async () => {
          next();
        }).catch( () => {
          next(false);
        });
      }else {
        next();
      }
    })

    const generateNumberArray = (length) =>{
      return Array.from({ length }, (_, index) => index);
    }

    onMounted(() => {
      getAttendanceTime(tab);

    });

    return {
      handClick,
      handleSubButtonClick,
      active:0,
      ...toReactive(tab),
      eduUrl,
      time,
      generateNumberArray,
      // setRef,

    }
  }
}

</script>

<style scoped lang="less">


.slideOut {
  animation: slideOutAnimation 1s;
}

@keyframes slideOutAnimation {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/deep/.van-cell{
  padding: 3vw;
  .img{
    width: 20vw;
    height: 25vw;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 0.5vw;
    margin-right: 5vw;
  }

  .van-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .middel{
    width: 10px;
    margin: 0;
    padding: 0;
  }

  .my-icon{
    margin: 0;
    padding: 0;
    display: inline-block;
  }

  .text {
    display: flex;
  }

  .van-button{
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
    margin-bottom: 1.5vw;
  }
  .content {
    width: 45vw;
    display: block;
    flex-direction: column;
  }

  .van-row {
    display: block;
    flex-direction: column;
    width: 20vw;
    height: 25vw;
    padding-left: 6vw;
    padding-top: 1vw;
  }
}

.info {
  padding-top: 20px;
  font-size: 4.5vw;
  margin: 0;
}

/deep/.van-tabs{
  .van-tabs__line{
    width: 20%;
    background-color: #2b95ef;
  }
  .van-tab--active{
    color: #2b95ef;
  }

  .van-tabs__wrap {
    position: sticky;
    top: 12vw;
    z-index: 100;
  }

}
.container{
  font-family: 'Helvetica Neue',Helvetica,sans-serif;
  line-height: 21px;
  color: #141414;
  background-color: #f6f6f7;
  margin: 0;
  display: block;
}


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body, #app {
  height: 100%!important;
  background-color: inherit;
}
</style>